<template>
	<view class="body">
		<view class="discount-block" v-for="item in infoArr" @click="navTo(item.id)">
			<image 
			:src="item.imgPath"
			mode="widthFix"
			/>
			<view class="block-footer">
				<text>{{item.title}}</text>
				<view class="btn">
					<text>></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive } from 'vue'

const infoArr=reactive([
	{
		id:1,
		imgPath:"https://ts1.cn.mm.bing.net/th?id=OLC.0IbZpji2vg4aRw480x360&w=210&h=140&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2",
		title:"北京四日追花拍摄秘籍-故宫"
	},
	{
		id:2,
		imgPath:"https://ts3.cn.mm.bing.net/th?id=OIP.ggdFTLAP9y2j2gEOP7M4LgHaFR&w=298&h=211&c=10&rs=1&qlt=99&bgcl=fffffe&r=0&o=6&dpr=1.3&pid=23.1",
		title:"ensemble stars!!!"
	},
	{
		id:3,
		imgPath:"https://cn.bing.com/th?id=OVFT.ptaR7fGLeJsKur8S_XxShi&pid=News&w=120&h=80&c=14&rs=2&qlt=90&dpr=1.3",
		title:"澳门新葡京娱乐城，麻将胡了2"
	}
	])
	
	console.log("infoArr:",infoArr);
	
	function navTo(discountId){
		uni.navigateTo({
			url:'../DiscountPurchaseInfo/DiscountPurchaseInfo',
			success: (res) => {
				res.eventChannel.emit('discountInfo', {
				    // 传递的数据
					id:discountId
				})
			}
		})
	}
	
	
	
	
</script>

<style>
	/* 全页面 */
	.body{
		text-align: center;
		background-color: #fff
	}
	
	/* 优惠团购模块 */
	  .discount-block{
		  width: 90%;
		  text-align: center;
		  margin: 10px auto;
		  
		  background-color: #fff;
		  box-shadow: 5px 5px 8px rgba(0,0,0,0.1); 
		  border-radius: 20px;
		  /* 浅色阴影 */
		  
		  }  
	.discount-block image{
		  		  width: 100%;
				  border-radius: 20px 20px 0 0;
		}  
			
	.discount-block .block-footer{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
	} 
	
	.discount-block .block-footer .btn{
		width: 20px;
		height: 20px;
		
		text-align: center;
		line-height: 20px;
		border-radius: 50%;
		border: #0000ff 2px solid;
		color: #0000ff;
	} 
	.discount-block .block-footer .btn:hover{
		background-color: lightgray;
	} 
</style>
